/**
在 React 中， Fragment  是一种用于将多个子元素组合在一起而不添加额外 DOM 节点的组件。使用  Fragment  可以帮助开发者避免在渲染时引入不必要的节点，从而保持 DOM 结构的简洁。
  1. 基本概念
  - Fragment 允许将多个子元素包裹在一起，而不在 DOM 中生成额外的节点。这在需要返回多个元素但不希望添加额外的父元素时非常有用。

  2. 使用方式
  有两种方式可以使用  Fragment ：

   1. 使用  <Fragment>  标签：
  jsx
  import React, { Fragment } from 'react';

  const MyComponent = () => {
    return (
      <Fragment>
        <h1>Hello</h1>
        <h2>World</h2>
      </Fragment>
    );
  };
   2. 使用简写形式  <> ：
  jsx
  const MyComponent = () => {
    return (
      <>
        <h1>Hello</h1>
        <h2>World</h2>
      </>
    );
  };
  3. 特点和优势
  - 不增加额外节点：使用  Fragment  可以避免在 DOM 中添加不必要的父节点，这有助于保持 DOM 结构的整洁。
  - 提高性能：减少了 DOM 节点的数量，可能会提高渲染性能，尤其是在大型应用中。
  - 可以使用  key  属性：当需要在列表中渲染多个元素时，可以给  Fragment  添加  key  属性，以便 React 更好地识别和管理这些元素。
  jsx
  const MyList = ({ items }) => {
    return (
      <>
        {items.map(item => (
          <Fragment key={item.id}>
            <h1>{item.title}</h1>
            <p>{item.description}</p>
          </Fragment>
        ))}
      </>
    );
  };
  4. 总结
  React  Fragment  是一个非常实用的工具，允许开发者在不引入额外 DOM 节点的情况下组合多个子元素。通过使用  Fragment ，可以简化组件的结构，提高 DOM 的清晰度和性能。在需要返回多个元素而不希望增加额外包裹层的情况下， Fragment  是理想的选择。
 */
import React, { PureComponent, Fragment } from 'react'

export default class App extends PureComponent {
  constructor() {
    super()

    this.state = {
      sections: [
        { id: 1, title: 'Section 1', description: 'Fragment Description 1' },
        { id: 2, title: 'Section 2', description: 'Fragment Description 2' },
        { id: 3, title: 'Section 3', description: 'Fragment Description 3' },
      ]
    }
  }
  
  render() {
    const { sections } = this.state
    
    return (
      <>
        <h3>App Fragment</h3>
        <p>Fragment  是一种用于将多个子元素组合在一起而不添加额外 DOM 节点的组件。使用  Fragment  可以帮助开发者避免在渲染时引入不必要的节点，从而保持 DOM 结构的简洁。</p>
        <hr />

        {
          sections.map(item => {
            return (
              <Fragment key={item.id}>
                <h4>{item.title}</h4>
                <p>{item.description}</p>
              </Fragment>
            )
          })
        }
      </>
    )
  }
}
